<script setup>
import Bar from "@/views/order/table/bar.vue";
import DetailsTable from "@/views/order/table/detailsTable.vue";

const msg = [
  {

    name: '下单',

    time: '2023-06-09 20:01:49',

    isNow: 1,


  },
  {

    name: '付款',

    time: '2023-06-09 20:01:49',

    isNow: 1,


  },
  {

    name: '发货',

    time: '2023-06-09 20:01:49',

    isNow: 1,


  },
  {

    name: '收货',

    time: '2023-06-09 20:01:49',

    isNow: 0,


  },
  {

    name: '完成',

    time: '2023-06-09 20:01:49',

    isNow: 0,
  },
]
const detailsDate=[
  {}
]
</script>

<template>
  <div class="box">
    <div class="title">
      订单详情
    </div>
    <header>
      <div class="bars">
        <Bar :list="msg" setps="1"></Bar>

        <div>

        </div>
      </div>
      <div class="btn">
        <div>订单操作：</div>
        <el-button>取消订单</el-button>
      </div>
    </header>
    <main>
      <DetailsTable></DetailsTable>
    </main>
  </div>
</template>

<style scoped lang="scss">
.box {
  .title {
    color: #509A80;

  }
}
header{
  margin: 10px 0;
  .btn{
    display: flex;
    align-items: center;
    margin: 10px 0;
    el-button{
      width: 70px;
      height: 40px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #509A80;
    }
  }
}
main{
  background: #FFFFFF;
}
.bars {
  width: 100%;
  //height: 100px;
  //background-color: #6b778c;
  //position: relative;
  display: flex;
  justify-content: center;
  bar {
    position: absolute;
    left: 0

  }


}
</style>